<template>
	<view>
		<chat-list :messages="messages" ref="chat-list" />
		<my-header></my-header>
		<my-footer @sendText="handleSendText" :loading="loading"></my-footer>
	</view>
</template>

<script lang="ts">
import Vue from 'vue';
import Header from '../../components/header.vue'
import Footer from '../../components/footer.vue'
import ChatList from '../../components/chat-list.vue'
import { fetchEventSource } from '@microsoft/fetch-event-source';

type Message = {
	role: "assistant" | 'user'
	content: string
}
export default Vue.extend({
	components: { "my-header": Header, "my-footer": Footer, "chat-list": ChatList },
	data() {
		return {
			loading: false,
			messages: new Array<Message>()
		}
	},
	onLoad() {
		uni.getStorage({
			key: "messages",
			success: (data) => {
				this.messages = JSON.parse(data.data)
			}
		})
	},
	methods: {
		handleSendText(str: string) {
			this.messages.push({ role: "user", content: str })
			this.loading = true
			uni.setStorage({
				key: "messages",
				data: JSON.stringify(this.messages)
			})
			const chatListCompoent = this.$refs["chat-list"] as any
			chatListCompoent.scrollToBottom()
			// uni.request({
			// 	url: "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=24.992b257ab43bb789477bbd539bf58038.2592000.1712583061.282335-43811306",
			// 	method: "POST",
			// 	data: {
			// 		messages: this.messages
			// 	},
			// 	success: (data: any) => {
			// 		this.messages.push({ role: "assistant", content: data.data.result })
			// 	},
			// 	complete: () => {
			// 		chatListCompoent.scrollToBottom()

			// 		this.loading = false
			// 		uni.setStorage({
			// 			key: "messages",
			// 			data: JSON.stringify(this.messages)
			// 		})

			// 	}
			// })

			fetchEventSource('https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=24.992b257ab43bb789477bbd539bf58038.2592000.1712583061.282335-43811306', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({
					messages: this.messages,
					stream: true
				}),
				onmessage: (ev) => {
					const { sentence_id, result, is_end } = JSON.parse(ev.data)
					if (sentence_id == 0) {
						this.messages.push({ role: "assistant", content: result })
					} else {
						const message = this.messages.pop()!
						message.content += result
						this.messages.push(message)
					}
					if (is_end) {
						this.loading = false
						uni.setStorage({
							key: "messages",
							data: JSON.stringify(this.messages)
						})
					} else {
						chatListCompoent.scrollToBottom()
					}
				}
			});

		}
	}
});
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin: 200rpx auto 50rpx auto;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
